<template>
  <div>
    <button>当前城市:{{ $store.city }}</button>
    <!-- <button>{{ com_city }}</button> -->

    <h3>列表城市</h3>
    <div>
      <!-- :key  index -->
      <button @click="handleBack(item)" v-for="item of cities" :key="item">
        {{ item }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { useCityStore } from "../../stores/city";
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
const $store = useCityStore();
const $router = useRouter();
// const { city, changeCity } = useCityStore();
const cities = ref(["武汉", "苏州", "上海", "无锡"]);
const handleBack = (item) => {
  /* 1、点击事件改pinia中的值 */
  $store.changeCity(item);
  /* 2、跳转会前一个页面 */
  // $router.back();
  /* history */
};
watch(
  () => $store.city,
  (val) => {
    console.log(val);
  }
);
</script>

<style scoped>
button {
  margin-left: 20px;
}
</style>
